<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 我的第一个jqGrid例子 </title>
  <link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="CSS/themes/redmond/jquery-ui-1.7.2.custom.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="CSS/themes/ui.jqgrid.css" />
  
  <!-- 引入jQuery -->
  <script type="text/javascript" src="js/jquery/jquery-1.4.js"></script>
  <script src="js/jquery/plugins/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
  <script src="js/jquery/plugins/grid.locale-zh_CN.js" type="text/javascript"></script>
  <script src="js/jquery/plugins/jquery.jqGrid.min.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(function()
		  {
		  	$("#gridTable").jqGrid({
		  		url:'jgrid',
		  		datatype: "json",
		  		height: 250,
		  		colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
		  		colModel:[
		  			{name:'id',index:'id', width:60, sorttype:"int"},
		  			{name:'userName',index:'userName', width:90},
		  			{name:'gender',index:'gender', width:90},
		  			{name:'email',index:'email', width:125,sorttype:"string"},
		  			{name:'QQ',index:'QQ', width:100},		
		  			{name:'mobilePhone',index:'mobilePhone', width:120},		
		  			{name:'birthday',index:'birthday', width:100, sorttype:"date"}
		  		],
		  		sortname:'id',
		  		sortorder:'asc',
		  		viewrecords:true,
		  		rowNum:10,
		  		rowList:[10,20,30],
		  		jsonReader:{
		  			repeatitems : false
		  		},
		  		pager:"#gridPager",
		  		caption: "jqGrid与Servlet集成"
		  	}).navGrid('#gridPager',{edit:false,add:false,del:false});
		  })
  </script>
 </head>
 <body>
	<table id="gridTable"></table>
	<div id="gridPager"></div>
 </body>
</html>